<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<title>index</title>
		<meta name="description" content="" />
		<meta name="author" content="Johan" />

		<meta name="viewport" content="width=device-width; initial-scale=1.0" />

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
		<script type="text/javascript" src="js/vendor/jquery-1.7.2.min.js"></script>   
	</head>

	<body>
		<div>
			<header>
				<h1>index</h1>
			</header>
			<nav>
				<p>
					<a href="/">Home</a>
				</p>
				<p>
					<a href="/contact">Contact</a>
				</p>
			</nav>

			<div>

			</div>

			<footer>
				<p>
					&copy; Copyright  by Johan
				</p>
			</footer>
		</div>
		<canvas id="myCanvas" width="400" height="400">Your browser does not support the canvas tag.</canvas>

		<script type="text/javascript">
		   function dibujarEsfera(ctx,tam,colorExterno,colorInterno) {
				ctx.fillStyle=colorExterno;
				ctx.beginPath();
				ctx.arc(tam,tam,tam,0*Math.PI,2*Math.PI);
				ctx.fill();
				dibujarInteriorEsfera(ctx,tam,colorInterno)
 			}
 			
 			function dibujarInteriorEsfera(ctx,tam,colorInterno) {
				ctx.fillStyle=colorInterno;
				ctx.beginPath();
				ctx.arc(tam,tam,tam-tam/20,0*Math.PI,2*Math.PI);
				ctx.fill();
 			}
 			
 			function ponerHora(ctx,tam) {
 				var d = new Date();
            	angleSec = (d.getSeconds() * 6) - 90;
            	dibujarAguja(ctx,angleSec,tam,1,"#0000FF",2);
        		angleMin = (d.getMinutes() * 6) - 90;
        		dibujarAguja(ctx,angleMin,tam,0.8,"#000000",4);
            	angleHour = ((d.getHours() * 5 + d.getMinutes() / 12) * 6) - 90;
            	dibujarAguja(ctx,angleHour,tam,0.7,"#000000",6);
 			}
 			
 			function dibujarAguja(ctx,angulo,tam,rate,color,grueso) {
 				ctx.strokeStyle=color;
 				ctx.beginPath();
				ctx.moveTo(tam,tam);
				longitud = (tam - tam/20) * rate;
				x = tam + longitud * Math.cos(angulo*Math.PI/180);
				y = tam + longitud * Math.sin(angulo*Math.PI/180);
				ctx.lineTo(x,y);
				ctx.lineWidth=grueso;
 				ctx.stroke();
 			}
		
			$(document).ready(function() {
				var canvas = document.getElementById('myCanvas');
				var ctx = canvas.getContext('2d');
   				dibujarEsfera(ctx,200,"#000000","#FFFFFF");
   				ponerHora(ctx,200);
 			});
 			
			setInterval(function () {
				var canvas = document.getElementById('myCanvas');
				var ctx = canvas.getContext('2d');
				dibujarInteriorEsfera(ctx,200,"#FFFFFF");
				ponerHora(ctx,200);
				}, 1000);

		</script>
	</body>
</html>
